<script setup lang="ts">
import {useUserPinia} from '~/stores/user'
import {storeToRefs} from "pinia";
import {onMounted, ref, onBeforeMount} from "vue";

import HP5050 from "~/public/shop/HP5050_banner-Lido_03_Ivory_Boucle_1011-992x1120_672x448.webp"
// 用tm代替t，因为tm是响应式的而且可以解析对象
const {locale, setLocale, tm} = useI18n()
const userStore = useUserPinia()
const {token, rating_five} = storeToRefs(userStore);


const online_list1 = ref([
    {
      id: "1",
      title: '促进转化',
      subTitle: "直接在收银环节提供支付奖励，确保高营销转化率。",
      src: 'https://cdn.marmot-cloud.com/page/antom_official_website/_next/static/media/payment-marketing1.9f928195.svg'
    },
    { 
      id: "2",
      title: '多渠道营销',
      subTitle: "从线上收银台的立减，到线下营销码，我们提供全渠道营销解决方案。",
      src: 'https://cdn.marmot-cloud.com/page/antom_official_website/_next/static/media/payment-marketing2.444bde01.svg'
    },
    { 
      id: "3",
      title: '多币种结算',
      subTitle: "我们的多币种结算能力尤其适用跨境营销，可以按顾客的本币提供优惠。",
      src: 'https://cdn.marmot-cloud.com/page/antom_official_website/_next/static/media/payment-marketing3.e77597bf.svg'
    },
    { 
      id: "4",
      title: '定制营销机制',
      subTitle: "您可灵活策划优惠形式，例如针对顾客的首次使用提供折扣。",
      src: 'https://cdn.marmot-cloud.com/page/antom_official_website/_next/static/media/payment-marketing4.f283d5ec.svg'
    },
 ])


 const carousel_Images = computed(() => {
  return [
    {
        headImage: 'https://mdn.alipayobjects.com/huamei_pwpjvv/afts/img/A*clwFQIsvpwUAAAAAAAAAAAAADmesAQ/fmt.webp',
        subImage: 'https://mdn.alipayobjects.com/huamei_pwpjvv/afts/img/A*O3PgQ7vux6cAAAAAAAAAAAAADmesAQ/fmt.webp'
    }
  ]
})


/**
 * 屏幕尺寸
 */
const screenSize = ref({width: 0, height: 0});


// 更新屏幕尺寸的方法
const updateScreenSize = () => {
  screenSize.value = {
    width: window.innerWidth,
    height: window.innerHeight,
  };
  // console.log("屏幕尺寸", screenSize.value.width)
};



onMounted(() => {
  window.addEventListener('resize', updateScreenSize);
  // 初始化屏幕尺寸
  updateScreenSize();

})

// 组件卸载时移除事件监听器
onUnmounted(() => {
  window.removeEventListener('resize', updateScreenSize);
});

</script>

<template>
  <v-app>
    <!-- 主图-->
     <banner-main
      :is-show-doc="false"
      themeColor="black"
      :lists="carousel_Images" 
      title="支付营销" 
      subTitle="为不同的支付方式配置个性化营销活动，进一步激励顾客使用熟悉的方式完成支付，提升支付转化率。"
     ></banner-main>
     <div class="mx-auto d-flex justify-center w-8/12">
            <div 
            v-for="bl in online_list1"
            :key="bl.id"
            class="bg-white d-flex justify-center align-center rounded-lg"
            >
            <div class="w-3/12 d-flex flex-column align-center h-[400px] w-[340px] text-center px-10">
                <div>
                    <v-img width="200px" height="200px" cover :src="bl.src"/>
                </div>
                <span class="font-semibold text-2xl mt-4  mb-10">{{ bl.title }}</span>
                <span class="">{{ bl.subTitle }}</span>
            </div>
            </div>
      </div>
      <div class="mx-auto w-9/12 d-flex text-center">
        <div class="w-6/12 d-flex flex-column justify-center align-center">
          <div class="mx-auto w-6/12 d-flex flex-column ">
            <span class="text-left text-[32px] font-bold">收银台营销</span>
            <span class="text-left text-[20px] mt-10">在结账环节提供即时的优惠。</span>
          </div>
        </div>
        <div class="w-6/12 d-flex justify-center align-center ">
          <div class="w-[277px]">
            <v-img width="277px" height="568px" cover src="https://gw.alipayobjects.com/mdn/huamei_e3pl6d/afts/img/A*DlKXQIt-yTAAAAAAAAAAAAAADmOsAQ/fmt.webp"/>
          </div>
        </div>
    </div>
     <div class="mx-auto w-9/12 d-flex text-center mt-40">
        <div class="w-6/12 d-flex justify-center align-center w-[757px]">
          <v-img width="277px" height="568px" cover src="https://gw.alipayobjects.com/mdn/huamei_e3pl6d/afts/img/A*bLiTQJxHlqYAAAAAAAAAAAAADmOsAQ/fmt.webp"/>
        </div>
        <div class="w-6/12 d-flex flex-column justify-center align-center">
          <div class="mx-auto w-6/12 d-flex flex-column ">
            <span class="text-left text-[32px] font-bold">店铺营销码</span>
            <span class="text-left text-[20px] mt-10">顾客使用电子钱包扫描营销码领取折扣。</span>
          </div>
        </div>
    </div>

    <footer-other></footer-other>

  </v-app>

</template>

<style scoped>

</style>